/**
 * 定义一个名为JumpText的组件，用于实现文字从页面左边滑进网页的效果
 * 该组件实现了一个页面滚动到当前位置时触发的文字滑动效果
 */
/**
 * JumpText组件用于在滚动到特定文本时添加滑动动画效果
 * 它通过监听窗口滚动事件来确定文本是否进入视口，并在文本进入视口时应用动画效果
 */
const JumpText = {
    // 定义组件的属性
    props: {
        // text属性：用于接收要显示的文本内容，类型为String，且为必填项
        text: {
            type: String,
            required: true
        }
    },
    // 定义组件的数据
    data() {
        return {
            // isVisible用于控制文本的可见性，初始值为false
            isVisible: false
        };
    },
    // 定义组件的方法
    methods: {
        /**
         * handleScroll方法用于处理滚动事件
         * 它通过获取文本元素的位置来判断文本是否进入视口，并相应地更新isVisible状态
         */
        handleScroll() {
            // 获取文本元素
            const element = this.$refs.jumpText;
            // 获取文本元素相对于视口的位置
            const rect = element.getBoundingClientRect();
            // 如果文本元素的顶部在视口之上，且底部在视口之内，则将isVisible设置为true
            if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
                this.isVisible = true;
            }
        }
    },
    // 组件挂载时执行的方法
    mounted() {
        // 添加滚动事件监听器
        window.addEventListener('scroll', this.handleScroll);
        // 初始检查，以确保在页面加载时执行滚动检查
        this.handleScroll();
    },
    // 组件销毁前执行的方法
    beforeDestroy() {
        // 移除滚动事件监听器，以防止内存泄漏
        window.removeEventListener('scroll', this.handleScroll);
    },
    // 定义组件的模板
    template: `
        <span 
            ref="jumpText" 
            :class="{ 'jump-animation': isVisible }"
            class="jump-text"
        >
            {{ text }}
        </span>
    `
};

// 定义路由配置
const routes = [
    {
        path: '/',
        component: {
            template: `
                <div class="xwzx text-center">
                    <div class="container">
 
                        <div class="row">			
                            <div class="xwzx_con text-left">
                                <div class="col-md-4 col-sm-4 col-xs-12">
                                    <dl>
                                        <dt><a href="#"><img src="images/lishi_1.jpg" class="img-responsive"/></a></dt>
                                        <dd class="mt15">
                                            <jump-text text="《三危山》"></jump-text>							
                                            <p>敦煌最早的文字记载见于《山海经》和晋代陶渊明的诗作。
                                            地名“敦煌”最早出现在《史记·大宛列传》中。东汉学者应邵解释为“盛大辉煌”，
                                            寓意繁荣昌盛；唐代李吉甫则认为敦煌因广开西域而得名。
                                            虽然敦煌一词的来源尚无定论，但其在中国历史中的重要性无可否认。</p>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-12">
                                    <dl>
                                        <dt><a href="#"><img src="images/lishi_2.jpg"  class="img-responsive"/></a></dt>
                                        <dd class="mt15">
                                            <jump-text text="《张骞出使西域图》"></jump-text>
                                            <p>秦末汉初，敦煌地区被月氏、匈奴占据。汉武帝设立四郡并筑玉门关、阳关防御，敦煌地位进一步巩固。汉代，敦煌成为中原与西域的桥梁，发展为农业区和兵马粮草基地。
                                            东汉设西域都护府，成为抗北匈奴的前线。三国时期，敦煌在曹魏治下继续繁荣，农业与文化得到发展。</p>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-12">
                                    <dl>
                                        <dt><a href="#"><img src="images/lishi_3.jpg" class="img-responsive"/></a></dt>
                                        <dd class="mt15">
                                            <jump-text text="《莫高窟外部》"></jump-text>
                                            <p>佛教在东汉时传入敦煌，并在西晋时期由月氏人竺法护传播开来。敦煌莫高窟的开凿始于前秦时期，乐僔和尚在鸣沙山开凿了第一个佛窟，随后法良禅师继续修建。北魏和隋唐时期，莫高窟的建设达到高峰，形成了世界闻名的石窟艺术宝库。</p>
                                        </dd>
                                    </dl>
                                </div>				
                            </div>			
                        </div>
                        <div class="row">			
                            <div class="xwzx_con text-left">
                                <div class="col-md-8 col-sm-8 col-xs-12">
                                    <dl>
                                        <dt><a href="#"><img src="images/lishi_4.jpg" class="img-responsive"/></a></dt>
                                        <dd class="mt15">
                                            <jump-text text="《张议潮出行图》"></jump-text>							
                                            <p>唐代，敦煌是军用物资和兵源的重要基地，经过水利建设，农业发展。安史之乱后，敦煌被吐蕃占据，成为沙州，佛教文化繁荣。张议潮起义推翻吐蕃，恢复唐制，敦煌成为文化宗教中心。归义军时期，敦煌多民族融合，佛教持续发展。唐末五代，敦煌政治稳定，经济文化繁荣。西夏统治后，敦煌衰落，元明清时其重要性降低，但仍为边疆民族聚居地。</p>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-12">
                                    <dl>
                                        <dt><a href="#"><img src="images/lishi_5.jpg"  class="img-responsive"/></a></dt>
                                        <dd class="mt15">
                                            <jump-text text="《莫高窟藏经洞》"></jump-text>
                                            <p>光绪二十六年（1900年），王道士的伙计发现藏经洞（今17窟），内藏5万余件佛经等物品。王道士赠送部分经卷未引起重视，外籍探险队低价掠夺文物。1909年，伯希和向罗振玉展示经卷，激起关注。罗振玉请求政府购买剩余经卷，敦煌重新引起世人关注。</p>
                                        </dd>
                                    </dl>
                                </div>						
                            </div>			
                        </div>	    
                    </div>
                </div> 
            `,
            components: {
                JumpText
            }
        }
    }
];

// 创建Vue Router实例
const router = new VueRouter({
    routes
});

// 创建Vue实例
document.addEventListener('DOMContentLoaded', () => {
    new Vue({
        el: '#app-4',
        router
    });
});